<template>
    <div class="my-table">
        <!-- 搜索栏本体 -->
        <div class="m-search" ref="mSearch">
            <m-form
                :formData="searchData"
                :searchButtonList="searchButtonList"
                :isInline="isInline"
                :isSearch="true"
                :labelWidth="labelWidth">
            </m-form>
        </div>

        <!-- 表格本体 -->
        <div v-if="isHeightReady" class="m-table-content">
            <m-table
                class="m-table"
                :tableHeight="tableHeight"
                :tableButtonList="tableButtonList"
                :current-page.sync="currentPage"
                :isShowIndex="true"
                :tableColumns="tableColumns"
                :tableList="tableList"
                v-on="$listeners"
                :total="count">
            </m-table>
        </div>
    </div>
</template>

<script>
import Mtable from './MTable/MTable.vue'
import MForm from './MForm/MForm.vue'
export default {
    name: 'my-table',
    components: {
        [Mtable.name]: Mtable,
        [MForm.name]: MForm,
    },
    props: {
        // form-item是否都在同一行
        isInline: {
            type: Boolean,
            default: false
        },
        // form表单的宽度
        labelWidth: {
            type: String,
            default: '80px'
        },
        // 表头数据
        tableColumns: {
            type: Array,
            default: () => { }
        },
        // 表格的数据
        tableList: {
            type: Array,
            default: () => { }
        },
        // 是否显示序号列
        isShowIndex: {
            type: Boolean,
            default: false
        },
        // 搜索框的数据
        searchData: {
            type: Array,
            default: () => { }
        },
        // 搜索按钮的配置数据
        searchButtonList: {
            type: Array,
            default: () => { }
        },
        // 表格按钮配置数据
        tableButtonList: {
            type: Array,
            default: () => { }
        },
        // 表格长度
        count: {
            type: Number,
            default: 0
        }
    },
    data () {
        return {
            // table高度
            tableHeight: '',
            // table是否准备好
            isHeightReady: false,
            screenWidth: document.body.clientWidth, // 初始化宽度
            currentPage: 1, // 当前页码
            // mForm参考配置项
            /* searchData: [
                { type: 'text', name: 'text', label: '文本', value: '文本', },
                { type: 'select', name: 'select', label: '下拉框', value: 'select1', options: [{ id: 'select1', text: '选项1' }, { id: 'select2', text: '选项2' }] },
                { type: 'switch', name: 'switch', label: '开关', value: true },
                { type: 'checkbox', name: 'checkbox', label: '多选组', value: ['select1'], options: [{ id: 'select1', text: '选项1' }, { id: 'select2', text: '选项2' }] },
                { type: 'radio', name: 'radio', label: '单选', value: 'select1', options: [{ id: 'select1', text: '选项1' }, { id: 'select2', text: '选项2' }] },
                { type: 'textarea', name: 'textarea', label: '多行文本', value: '多行文本' },
                { type: 'password', name: 'password', label: '密码框', value: '2222', },
                { type: 'number', name: 'number', label: '计数器', value: 2, min: 0, max: 100 },
                { type: 'date', name: 'date', label: '日期', },
                { type: 'time', name: 'time', label: '时间', },
            ] */
            /*  // 按钮数据参考配置项
            searchButtonList: [
                 {
                    id: 'search',
                    name: '查询',
                    type: 'primary',  // primary/warning/danger/success
                    loading: false, // 若按钮点击时需要loading效果，则放开注释
                    click: function (btnList, that) {
                        // this 当前按钮对象 {id: "search", name: "查询", ....}
                        // btnList 当前的 searchButtonList数组
                        // that mForm表单页面的this
                        this.loading = true
                        console.log(this)
                        console.log(that.mform)
                        this.loading = false
                    }
                 }
             ] */
        }
    },
    methods: {
        // 设置表格的自适应高度
        setTableHeight () {
            let mSearchHeight = this.$refs.mSearch.offsetHeight
            this.fullHeight = document.body.clientHeight - mSearchHeight - 202
            this.tableHeight = this.fullHeight > 200 ? this.fullHeight + 'px' : '200px'
            this.isHeightReady = true
        }
    },
    computed: {},
    watch: {},
    created () {
    },
    mounted () {
        this.setTableHeight()
        let that = this
        window.onresize = function temp () {
            that.setTableHeight()
        }
    },
}
</script>

<style lang="scss" scoped>
.m-search {
    width: 100%;
    min-height: 80px;
    padding: 20px 0 0px 10px;
    margin-bottom: 20px;
    border: 1px solid #ebeef5;
    background-color: #fff;
}
.m-table-content {
    .m-table {
        overflow: hidden;
    }
}
</style>